<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录验证-非常重要</title>
	    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	    <script>
	    	function checkUname(){
	    		//用户输入的
	    		username=$("#uname").val();
	    		//验证规则
	    		reg=/^[a-zA-Z0-9]{3,10}$/;
	    		if(!reg.test(username)){
	    			$("#uname").css("border-color","red")
	    			return false;
	    		}else{
	    			$("#uname").css("border-color","")
	    		    return true;
	    		}
	    	}
	    	function checkUpsw(){
	    		psw=$("#upsw").val()
	    		reg=/^[0-9]{6}$/;
	    		if(!reg.test(psw)){
	    			$("#upsw").css("border-color","red")
	    		    return false;
	    		}else{
	    			$("#upsw").css("border-color","")
	    		    return true;
	    		}
	    	}
	        function checkALL(){
	        	checkUname()
	        	checkUpsw();
	        }
	    </script>
	</head>
	<body>
		<h3>用户名是字母数字的组合，3-10个；密码6个数字</h3>
		用户名<input onblur="checkUname()" type="text" id="uname" />
		<br>
		密码<input onblur="checkUpsw()()" type="text" id="upsw" />
		<br>
		<button onclick="checkALL()">登录</button>
	</body>
</html>
